<template>
	<view>
		<uni-popup ref="popup" type="center">
			<view class="bg-white w-[590rpx] rounded-[20rpx] pb-[30rpx] relative z-101">
				<view class="text-[32rpx] text-center text-[#333333] py-[40rpx] border-0 border-b border-[#EBEBEB] border-solid">
					支付方式
				</view>
				<view class="flex flex-col px-[30rpx] mb-[30rpx]">
					<view class="text-[32rpx] text-[#333333] font-bold text-center py-[30rpx] mt-[20rpx]">
						支付金额{{dateForm.money}}元
					</view>
					<view class="flex justify-between items-center my-[20rpx]" @click="changePay(item.code)" v-for="(item,index) in payList" :key="index">
						<view class="flex items-center">
							<image :src="item.icon" class="w-[68rpx] mr-[16rpx]" mode="widthFix"></image>
							<text>{{item.name}}</text>
						</view>
						<uto-icon name="radioed" v-if="item.code == dateForm.pay_type" color="#169281" size="28"></uto-icon>
						<uto-icon name="radio" v-else color="#cccccc" size="28"></uto-icon>
					</view>
				</view>
				<view
					class="mx-[30rpx] bg-[#169281] h-[88rpx] leading-[88rpx] rounded-[8rpx] text-[#FFFFFF] text-[32rpx] text-center"
					@click="paymentTask">
					立即支付
				</view>
				
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts">
import { defineComponent, ref,reactive } from 'vue';
import { goTo } from '@/utils/common';
import {getStat} from '@/api/recharge';

import {pay,payType,getPayInfo} from '@/api/pay';
	export default defineComponent({
		name: 'payment',
		setup(_,{emit}) {
			const popup = ref(null);
			const isBalanceProp = ref(true)
			const total_money = ref(0)
			const qrcode=ref('')
			const openPopup = (out_trade_no:string,isBalance = true) => {
				dateForm.out_trade_no=out_trade_no;
				isBalanceProp.value = isBalance;
				if (popup.value) {
					popup.value.open();
				}
				getStat().then((res:any)=>{
					if(res.code==200){
						total_money.value=parseFloat(res.data.balance)
					}
				})
				getPayInfo({out_trade_no:out_trade_no}).then((res:any)=>{
					if(res.code==200){
						dateForm.money=res.data.money;
					}
				})
				payType({}).then((res:any)=>{
					if(res.code==200){
						payList.value=[];
						let payType=res.data;
						console.log(payType)
						// #ifdef MP-WEIXIN
						payType.forEach((val, key) => {
							if(val.code=='wxpay'){
								payList.value.push(val)
							}
							if(val.code=='allinpay'){
								payList.value.push(val)
							}
							if (val.code == 'balance') {
								if (isBalanceProp.value == true) {
									payList.value.push(val)
								}
							}
						
						});
						// #endif
					}
				})
			};
			
			const dateForm = reactive({
				out_trade_no:'',
				pay_type:'wxpay',
				money:0
			})
			
			const payList = ref([]);
			
			const changePay = (code:string)=>{
				dateForm.pay_type  = code;
			}
			
			const closePopup = ()=>{
				popup.value.close();
			}
			
			//调用支付
			const paymentTask = ()=>{
				pay({ pay_type: dateForm.pay_type, out_trade_no: dateForm.out_trade_no }).then((res:any) => {
					if (res.code == 200) {
						
						if (res.data.pay_success == 1) {
							goTo({ url: '/pages/result/result', param: { out_trade_no: dateForm.out_trade_no } })
							return;
						}
						if (dateForm.pay_type == 'wxpay') {
							res.data.partnerid = String(res.data.partnerid);
						}
						uni.requestPayment({
							provider: dateForm.pay_type,
							// #ifdef MP-WEIXIN
							timeStamp: res.data.timeStamp,
							signType: res.data.signType,
							paySign: res.data.paySign,
							package: res.data.package,
							nonceStr: res.data.nonceStr,
							appId: res.data.appId,
							// #endif
							orderInfo: res.data, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
							success: function (res) {
								goTo({ url: '/otherpages/result/result', param: { out_trade_no: dateForm.out_trade_no } })
							},
							fail: function (err) {
								uni.showToast({
									title: '用户取消支付',
									icon: 'none'
								}),
									setTimeout(() => {
										goTo({ url: '/otherpages/result/result', param: { out_trade_no: dateForm.out_trade_no } })
									}, 2000);
							}
						});
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
				//emit('paymentComplete', qrcode);
				closePopup();
			}

			return {
				popup,
				openPopup,
				closePopup,
				dateForm,
				payList,
				changePay,
				paymentTask
			};
		},
	});
</script>